<template>
    <div id="print-iframe">
        <el-form :model="invoice" :rules="rules1" ref="form1">
            <div class="title">
                <img src="../assets/title2.png" alt="" v-if="use_store.status == 2">
                <img src="../assets/title.png" alt="" v-else>
            </div>
            <div class="No" style="display:inline">
                <span style="font-weight: 800;color:red">No.:</span>
                <el-form-item prop="invoiceNumber">
                    <el-input v-model="invoice.invoiceNumber" style="display:inline" :readonly="use_store.status == 4"
                        :disabled="(use_store.operation == 1 || use_store.operation == 5)"></el-input>
                </el-form-item>
            </div>
            <div class="main">
                <img src="../assets/main.png" alt="">
                <div class="first_first">
                    <div class="title">
                        SOLD BY ORDER AND FOR ACCOUNT AND RISK OF THE BUYER:
                    </div>
                    <div class="buyer">
                        <!-- <el-form-item prop="customerName">
                            <el-select v-model="invoice.customerName" @change="buyerChange"
                                :disabled="(use_store.operation == 1 || use_store.operation == 5)">
                                <el-option v-for="item in buyerOptions" :label="item.name" :value="item.name" :key="item.id
                                    "></el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item>
                            <el-select v-model="invoice.customerName" filterable remote reserve-keyword
                                placeholder="请选择" :remote-method="searchCustomer" :loading="loading"
                                :disabled="(use_store.operation == 1 || use_store.operation == 5)"
                                @change="buyerChange">
                                <el-option v-for="item in customerNameOptions" :key="item.id" :label="item.name"
                                    :value="item.name" />
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="address">
                        <div class="addr">
                            Address:
                        </div>
                        <div class="note">
                            {{ invoice.customerAddress }}
                        </div>
                    </div>
                </div>
                <div class="first_second">
                    <div class="title">
                        Date:
                    </div>
                    <div class="date">
                        日期:<span>
                            <el-form-item prop="invoiceDate" style="display:inline">
                                <el-date-picker v-model="invoice.invoiceDate" type="date" placeholder="Pick a day"
                                    default-value @change="changeDate"
                                    :disabled="(use_store.operation == 1 || use_store.operation == 5)" />
                            </el-form-item>
                        </span>
                    </div>
                </div>
                <div class="first_third">
                    <div class="price">
                        <div class="title">
                            Price Terms:
                        </div>
                        <div class="note">
                            价格条款:
                            <el-form-item style="display:inline" prop="priceTerms">
                                <el-select style="width:240px" size="small" v-model="invoice.priceTerms"
                                    :disabled="use_store.status == 4 || (use_store.operation == 1 || use_store.operation == 5)">
                                    <el-option value="CY" label="CY"></el-option>
                                    <el-option value="Ex-Works" label="Ex-Works"></el-option>
                                    <el-option value="AT SIGHT" label="AT SIGHT"></el-option>
                                    <el-option value="DAP" label="DAP"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="payment" v-if="use_store.status != 3">
                        <div class="title">
                            Terms/method of payment:
                            <el-form-item style="display:inline" prop="paymentProvision">
                                <!-- <el-select style="width:100px" size="small" v-model="invoice.paymentProvision"
                                    @change="changePayClause" :disabled="(use_store.operation == 1 || use_store.operation == 5)">
                                    <el-option label="条款A" value="条款A"></el-option>
                                    <el-option label="条款B" value="条款B"></el-option>
                                    <el-option label="条款C" value="条款C"></el-option>
                                    <el-option label="条款D" value="条款D"></el-option>
                                    <el-option label="条款E" value="条款E"></el-option>
                                </el-select> -->
                            </el-form-item>
                            天数<el-input style="width:70px"
                                :disabled="(use_store.operation == 1 || use_store.operation == 5)" @change="changeDate"
                                v-model="invoice.days"></el-input>
                        </div>
                        <div class="note">
                            <div class="left">
                                付款条款：
                            </div>
                            <div class="right">
                                <el-input v-model="invoice.paymentProvision" type="textarea"
                                    :disabled="(use_store.operation == 1 || use_store.operation == 5)"></el-input>
                                <!-- {{ invoice.paymentProvision }} -->
                            </div>
                        </div>
                    </div>
                    <div class="due" v-if="use_store.status != 3">
                        <div class="title">
                            Payment Due Date:
                        </div>
                        <div class="note">
                            合同规定客户付款日：<el-date-picker v-model="invoice.paymentDate" type="date" placeholder="Pick a day"
                                size="small" :disabled="(use_store.operation == 1 || use_store.operation == 5)" />
                        </div>
                    </div>
                </div>
                <div class="second">
                    <!-- <img src="../assets/description.png" alt="" class="des">
                <img src="../assets/quantity.png" alt="" class="quan">
                <img src="../assets/price.png" alt="" class="price">
                <img src="../assets/amount.png" alt="" class="amount"> -->
                    <div class="des">
                        <div>
                            Description
                        </div>
                        <div>
                            品名、规格
                        </div>
                    </div>
                    <div class="quan">
                        <div>
                            Quantity
                        </div>
                        <div>
                            数量
                        </div>
                    </div>
                    <div class="price">
                        <div>
                            Unit Price
                        </div>
                        <div>
                            单价
                        </div>
                    </div>
                    <div class="amount">
                        <div>
                            Amount
                        </div>
                        <div>
                            金额
                        </div>
                    </div>
                </div>
                <div class="third">
                    <div class="third_first">
                        <el-form label-position="right" label-width="auto" style="max-width: 600px" size="small"
                            hide-required-asterisk :rules="rules2" ref="form2" :model="invoice">
                            <!-- <el-form-item label="Contract No.:" prop="contractNo">
                                <el-input style="width:150px" v-model="invoice.contractNo"
                                    :disabled="(use_store.operation == 1 || use_store.operation == 5)"></el-input>
                            </el-form-item> -->
                            <el-form-item prop="contractNo" label="contractNo:">
                                <!-- <el-input style="width:70px" v-model="invoice.contractNo"
                                    :disabled="(use_store.operation == 1 || use_store.operation == 5)"></el-input> -->
                                <el-input style="width:150px" v-model="invoice.contractNo"
                                    :disabled="(use_store.operation == 1 || use_store.operation == 5)"></el-input>
                            </el-form-item>
                            <div v-for="(item, index) in invoice.list">
                                <el-form-item v-if="use_store.status != 4">
                                    <el-select style="width:90px" v-model="invoice.list[index].description" clearable
                                        :disabled="(use_store.operation == 1 || use_store.operation == 5)" allow-create
                                        filterable default-first-option>
                                        <el-option label="20GP" value="20GP"></el-option>
                                        <el-option label="20HC" value="20HC"></el-option>
                                        <el-option label="20GPOS" value="20GPOS"></el-option>
                                        <el-option label="40GP" value="40GP"></el-option>
                                        <el-option label="40HC" value="40HC"></el-option>
                                        <el-option label="40GPOS" value="40GPOS"></el-option>
                                        <el-option label="10GP" value="10GP"></el-option>
                                        <el-option label="10HC" value="10HC"></el-option>
                                        <el-option label="20 FSA" value="20 FSA"></el-option>
                                        <el-option label="20 HC FSA" value="20 HC FSA"></el-option>
                                        <el-option label="20HCOS" value="20HCOS"></el-option>
                                        <el-option label="20Doucon" value="20Doucon"></el-option>
                                        <el-option label="20GPDD" value="20GPDD"></el-option>
                                        <el-option label="20HCDD" value="20HCDD"></el-option>
                                        <el-option label="20gp Xtainer WMPC" value="20gp Xtainer WMPC"></el-option>
                                        <el-option label="20HC房屋办公箱" value="20HC房屋办公箱"></el-option>
                                        <el-option label="20GP房屋办公箱" value="20GP房屋办公箱"></el-option>
                                        <el-option label="40HC房屋办公箱" value="40HC房屋办公箱"></el-option>
                                        <el-option label="40GPOT" value="40GPOT"></el-option>
                                        <el-option label="40OT" value="40OT"></el-option>
                                        <el-option label="40HCDD" value="40HCDD"></el-option>
                                        <el-option label="40HCOS" value="40HCOS"></el-option>
                                        <el-option label="45HC" value="45HC"></el-option>
                                        <el-option label="6.5尺特箱" value="6.5尺特箱"></el-option>
                                        <el-option label="9HC" value="9HC"></el-option>
                                        <el-option label="9HC（带门窗）" value="9HC（带门窗）"></el-option>
                                        <el-option label="40GPDD" value="40GPDD"></el-option>
                                        <el-option label="40DD" value="40DD"></el-option>
                                        <el-option label="20FOS" value="20FOS"></el-option>
                                        <el-option label="20HCFOS" value="20HCFOS"></el-option>
                                        <el-option label="托盘箱" value="托盘箱"></el-option>
                                        <el-option label="20DD" value="20DD"></el-option>
                                    </el-select>
                                    Steel Dry Cargo Container
                                </el-form-item>
                                <el-form-item label=" " v-else>
                                    <el-select style="width:120px" v-model="invoice.list[index].description" clearable
                                        :disabled="(use_store.operation == 1 || use_store.operation == 5)" allow-create
                                        filterable default-first-option @change="changeDes(item, index)">
                                        <el-option label="Freight" value="Freight"></el-option>
                                        <el-option label="Semi-trailer part" value="Semi-trailer part"></el-option>
                                        <el-option label="20GP" value="20GP"></el-option>
                                        <el-option label="20HC" value="20HC"></el-option>
                                        <el-option label="20GPOS" value="20GPOS"></el-option>
                                        <el-option label="40GP" value="40GP"></el-option>
                                        <el-option label="40HC" value="40HC"></el-option>
                                        <el-option label="40GPOS" value="40GPOS"></el-option>
                                        <el-option label="10GP" value="10GP"></el-option>
                                        <el-option label="10HC" value="10HC"></el-option>
                                        <el-option label="20 FSA" value="20 FSA"></el-option>
                                        <el-option label="20 HC FSA" value="20 HC FSA"></el-option>
                                        <el-option label="20HCOS" value="20HCOS"></el-option>
                                        <el-option label="20Doucon" value="20Doucon"></el-option>
                                        <el-option label="20GPDD" value="20GPDD"></el-option>
                                        <el-option label="20HCDD" value="20HCDD"></el-option>
                                        <el-option label="20gp Xtainer WMPC" value="20gp Xtainer WMPC"></el-option>
                                        <el-option label="20HC房屋办公箱" value="20HC房屋办公箱"></el-option>
                                        <el-option label="20GP房屋办公箱" value="20GP房屋办公箱"></el-option>
                                        <el-option label="40HC房屋办公箱" value="40HC房屋办公箱"></el-option>
                                        <el-option label="40GPOT" value="40GPOT"></el-option>
                                        <el-option label="40OT" value="40OT"></el-option>
                                        <el-option label="40HCDD" value="40HCDD"></el-option>
                                        <el-option label="40HCOS" value="40HCOS"></el-option>
                                        <el-option label="45HC" value="45HC"></el-option>
                                        <el-option label="6.5尺特箱" value="6.5尺特箱"></el-option>
                                        <el-option label="9HC" value="9HC"></el-option>
                                        <el-option label="9HC（带门窗）" value="9HC（带门窗）"></el-option>
                                        <el-option label="40GPDD" value="40GPDD"></el-option>
                                        <el-option label="40DD" value="40DD"></el-option>
                                        <el-option label="20FOS" value="20FOS"></el-option>
                                        <el-option label="20HCFOS" value="20HCFOS"></el-option>
                                        <el-option label="托盘箱" value="托盘箱"></el-option>
                                        <el-option label="20DD" value="20DD"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <el-form-item label="" v-if="use_store.status != 4" prop="bankAccountType">
                                <el-select style="width: 60px;" class="bank" v-model="invoice.bankAccountType"
                                    @change="changeBank"
                                    :disabled="(use_store.operation == 1 || use_store.operation == 5)"
                                    v-if="use_store.status != 3">
                                    <el-option v-if="use_store.status == 1" v-for="item in bankOptions"
                                        :label="item.bankAccountType" :value="item.bankAccountType"></el-option>
                                </el-select>
                                <span><el-input style="width:40px" v-model="invoice.invoiceRatio" @change="changeTotal"
                                        :disabled="(use_store.operation == 1 || use_store.operation == 5)"></el-input>%</span>
                                <span><el-select style="width:150px" v-model="invoice.invoiceMethod"
                                        :disabled="invoice.invoiceRatio == '100' || (use_store.operation == 1 || use_store.operation == 5)">
                                        <el-option label="Down Payment" value="Down Payment"></el-option>
                                        <el-option label="Balance Payment" value="Balance Payment"></el-option>
                                        <el-option label="Advance Payment" value="Advance Payment"></el-option>
                                    </el-select></span>
                            </el-form-item>
                        </el-form>
                        <!-- <div class="payment">
                    </div> -->
                        <div class="remit">
                            <div>
                                {{ invoice.bankInfo }}
                            </div>
                        </div>
                    </div>
                    <div class="third_second">
                        <el-form label-position="right" label-width="auto" style="max-width: 600px" size="small"
                            :model="invoice.list">
                            <el-form-item label=" ">
                            </el-form-item>
                            <div v-for="(item, index) in invoice.list">
                                <el-form-item>
                                    <span>
                                        <el-input v-model="invoice.list[index].quantity" @change="changeTotal"
                                            :disabled="invoice.list[index].description == '' || (use_store.operation == 1 || use_store.operation == 5) || invoice.list[index].description == 'Freight'"></el-input>
                                    </span>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                    <div class="third_third">
                        <el-form label-position="right" label-width="auto" style="max-width: 600px" size="small"
                            :model="invoice" :rules="rules3" ref="form3" hide-required-asterisk inline-message>
                            <el-form-item label=" " prop="unitPrice">
                                <el-select @change="changeUnit" v-model="invoice.unitPrice" v-if="use_store.status == 1"
                                    :disabled="(use_store.operation == 1 || use_store.operation == 5)">
                                    <el-option label="CNY" value="CNY"></el-option>
                                    <el-option label="USD" value="USD"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span><el-input v-model="invoice.list[0].unitPrice" @change="changeTotal"
                                        :disabled="invoice.list[0].description == '' || (use_store.operation == 1 || use_store.operation == 5)"></el-input></span>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span><el-input v-model="invoice.list[1].unitPrice" @change="changeTotal"
                                        :disabled="invoice.list[1].description == '' || (use_store.operation == 1 || use_store.operation == 5)"></el-input></span>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span><el-input v-model="invoice.list[2].unitPrice" @change="changeTotal"
                                        :disabled="invoice.list[2].description == '' || (use_store.operation == 1 || use_store.operation == 5)"></el-input></span>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span><el-input v-model="invoice.list[3].unitPrice" @change="changeTotal"
                                        :disabled="invoice.list[3].description == '' || (use_store.operation == 1 || use_store.operation == 5)"></el-input></span>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span><el-input v-model="invoice.list[4].unitPrice" @change="changeTotal"
                                        :disabled="invoice.list[4].description == '' || (use_store.operation == 1 || use_store.operation == 5)"></el-input></span>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span><el-input v-model="invoice.list[5].unitPrice" @change="changeTotal"
                                        :disabled="invoice.list[5].description == '' || (use_store.operation == 1 || use_store.operation == 5)"></el-input></span>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span><el-input v-model="invoice.list[6].unitPrice" @change="changeTotal"
                                        :disabled="invoice.list[6].description == '' || (use_store.operation == 1 || use_store.operation == 5)"></el-input></span>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span><el-input v-model="invoice.list[7].unitPrice" @change="changeTotal"
                                        :disabled="invoice.list[7].description == '' || (use_store.operation == 1 || use_store.operation == 5)"></el-input></span>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="third_fourth">
                        <el-form label-position="right" label-width="auto" style="max-width: 600px" size="small"
                            :model="invoice.list">
                            <el-form-item label=" ">
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[0].amount }}</span>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[1].amount }}</span>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[2].amount }}</span>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[3].amount }}</span>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[4].amount }}</span>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[5].amount }}</span>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[6].amount }}</span>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[7].amount }}</span>
                            </el-form-item>
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span class="total">{{ invoice.commodityMoney }}</span>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="fourth">
                    <div class="fourth_first">
                        TOTAL
                    </div>
                    <div class="fourth_second">
                        {{ invoice.commodityTotal }}
                    </div>
                    <div class="fourth_third"></div>
                    <div class="fourth_fourth">
                        <div>
                            <span>{{ invoice.unitPrice }}</span>
                            <span class="total">{{ invoice.commodityMoney }}</span>
                        </div>
                    </div>
                </div>
                <div class="fifth">
                    <div>
                        <span>Say</span>
                        <span>{{ invoice.say }}</span>
                        <span>{{ invoice.englishMoney }}</span>
                    </div>
                </div>
                <div class="sixth" v-if="invoice.status == '已开票'">
                    <div class="head" v-if="use_store.status != 2">
                        <div>
                            For and on behalf of
                        </div>
                        <div>
                            Shanghai CIMC Baowell Industries Co., Ltd.,
                        </div>
                    </div>
                    <div class="head" v-else>
                        <div>
                            For and on behalf of
                        </div>
                        <div>
                            ChinaInternationalMarine Containers (Grup) Co., Ltd.
                        </div>
                    </div>
                    <img src="../assets/name3.png" alt="">
                    <div class="foot" v-if="use_store.status == 2">
                        (Authorized Signatures)
                    </div>
                </div>
            </div>
        </el-form>
    </div>
    <div class="footer">
        <div v-if="use_store.operation == 1">
            <el-button @click="cancel">返回</el-button>
        </div>
        <div v-if="use_store.operation == 5">
            <el-button @click="reject">否决</el-button>
            <el-button @click="save()">通过</el-button>
        </div>
        <div v-if="use_store.operation != 5 && use_store.operation != 1">
            <el-button @click="cancel">取消</el-button>
            <el-button @click="draft">草稿</el-button>
            <el-button @click="save()">保存</el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { math } from '@/utils/math';
import { useRouter } from "vue-router";
import { useStore } from '@/stores/counter';
import { getCustomer, findAllByName, dollars, yuan, kaiPiaoGanXiang, invoiceNumber, kaiPiaoLingBuJian, searchGanXiang, searchLingBuJian, findBank, ganxiangExamineFalse, lingbujianExamineFalse, ganxiangExamine, lingbujianExamine, draftGanXiangKaiPiao, draftLingbujianKaiPiao } from "@/utils/invoice";
import { ElMessage } from "element-plus";
import { index } from "mathjs";
const use_store = useStore()
const router = useRouter()
const form1 = ref()
const form2 = ref()
const form3 = ref()
const myDate = new Date();
const user = localStorage.getItem("user")
const customerNameOptions = ref([])
const banklist = ref([])
const bankOptions = ref([])
const invoice = ref({
    id: '',
    customerName: '',
    invoiceRatio: "100",
    say: '',
    num: 0,
    commodityMoney: '0.00',
    invoiceMethod: '',
    date: '',
    remark: '2',
    bankInfo: (use_store.status == 3 || use_store.status == 4) ? `BANK OF COMMUNICATIONS SHENZHEN BR ，(SWIFT CODE: COMMCNSHSZN)
Quoting in favor of the Beneficiary:SHANGHAI CIMC BAOWELL INDUSTRIES  CO., LTD.
With Account Number: 443066144146100001164` : '',
    unitPrice: use_store.status == 1 ? '' : 'USD',
    commodityTotal: 0,
    customerAddress: '',
    type: '',
    bankAccountType: '',
    status: '',
    list: [
        {
            amount: "0.00",
            description: "",
            quantity: '',
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
        {
            amount: "0.00",
            description: "",
            quantity: '',
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
        {
            amount: "0.00",
            description: "",
            quantity: '',
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
        {
            amount: "0.00",
            description: "",
            quantity: '',
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
        {
            amount: "0.00",
            description: "",
            quantity: '',
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
        {
            amount: "0.00",
            description: "",
            quantity: '',
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
        {
            amount: "0.00",
            description: "",
            quantity: '',
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
        {
            amount: "0.00",
            description: "",
            quantity: '',
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
    ],
    priceTerms: '',
    paymentProvision: '',
    paymentMethods: '',
    invoiceDate: myDate.toLocaleDateString(),
    paymentDate: undefined,
    contractNo: '',
    invoiceNumber: undefined,
    englishMoney: '',
    applicationDepartment: '',
    applyPerson: '',
    applyTime: '',
    days: ''
})

const rules1 = reactive({
    invoiceNumber: [
        { required: true, message: '请填写', trigger: 'blur' },
    ],
    invoiceDate: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    paymentProvision: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    priceTerms: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    customerName: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
})
const rules2 = reactive({
    contractNo: [
        { required: true, message: '请填写', trigger: 'change' },
    ],
    // bankAccountType: [
    //     { required: true, message: '请选择', trigger: 'change' },
    // ],
})
const rules3 = reactive({
    unitPrice: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
})

const paymentOptions = [
    {
        label: "条款A",
        day: 60,
        value: "By T/T， (20 %) of the Contract Price needs to be paid within 3 days after contract signed completely. (80 %) of the Contract Price needs to be balanced 2 days before the delivery of the Containers from seller’s factory but no later than 60 days after Buyer’s acceptance certificate at factory."
    },
    {
        label: "条款B",
        day: 30,
        value: "By T/T, 15% of the Contract Price needs to be paid within 5 days after contract signed completely,85% of the Contract Price needs to be paid within 30 days after the Acceptance Date, or 2 days before the delivery of the Containers from seller’s factory, whichever is earlier."
    },
    {
        label: "条款C",
        day: 60,
        value: "By T/T, (30 %) of the Contract Price needs to be paid within 3 days after contract signed completely.(70 %) of the Contract Price needs to be balanced 2 days before the delivery of the Containers from seller’s factory but no later than 60 days after Buyer’s acceptance certificate at factory."
    },
    {
        label: "条款D",
        day: 60,
        value: "The Buyer shall pay the Seller the Contract Price by Telegraphic Transfer to Sellers nominated Bank Account within 60 days after Buyer's acceptance certificate at factory"
    },
    {
        label: "条款E",
        day: 90,
        value: "Purchaser shall pay 10% from total purchase price in advance. The balance of 90% to be paid no later than 90 days after acceptance. "
    },
]
const tongBankList = ref([])

onMounted(() => {
    getCustomer().then(res => {
        customerNameOptions.value = res.data;
        findBank().then((res) => {
            banklist.value = res
            if (use_store.status == 3) {
                banklist.value.forEach(element => {
                    if (element.type == "BSL") {
                        invoice.value.bankInfo = element.bankInfo
                        invoice.value.bankAccountType = element.bankAccountType
                    }
                })
            } else if (use_store.status == 4) {
                banklist.value.forEach(element => {
                    if (element.type == "零部件") {
                        invoice.value.bankInfo = element.bankInfo
                        invoice.value.bankAccountType = element.bankAccountType
                    }
                });
            } else if (use_store.status == 2) {
                tongBankList.value = banklist.value.filter(element => {
                    if (element.type == "统接" && element.unitPrice == invoice.value.unitPrice) {
                        return element
                    }
                });
            }
        })
        if (use_store.id != '') {
            if (use_store.status == 4) {
                searchLingBuJian(use_store.id).then(res => {
                    if (res.data.invoiceNumber != '新') {
                        invoice.value.invoiceNumber = res.data.invoiceNumber
                    }
                    if (res.data.status != '开票草稿') {
                        invoiceNumber().then(res => {
                            invoice.value.invoiceNumber = res.data
                        })
                    }
                    invoice.value.customerName = res.data.customerName
                    invoice.value.customerAddress = res.data.customerAddress
                    if (res.data.invoiceDate != '' && res.data.invoiceDate != null) {
                        invoice.value.invoiceDate = res.data.invoiceDate
                    }
                    invoice.value.priceTerms = res.data.priceTerms
                    invoice.value.paymentProvision = res.data.paymentProvision
                    // invoice.value.paymentMethods = res.data.paymentMethods
                    invoice.value.paymentDate = res.data.paymentDate
                    invoice.value.contractNo = res.data.contractNo
                    invoice.value.bankAccountType = res.data.bankAccountType
                    if (use_store.status != 4) {
                        invoice.value.invoiceRatio = res.data.invoiceRatio
                    }
                    invoice.value.invoiceMethod = res.data.invoiceMethod
                    invoice.value.days = res.data.days
                    invoice.value.applicationDepartment = res.data.applicationDepartment
                    invoice.value.applyPerson = res.data.applyPerson
                    invoice.value.applyTime = res.data.applyTime
                    if (res.data.unitPrice != null && res.data.unitPrice != '') {
                        invoice.value.unitPrice = res.data.unitPrice
                    }
                    invoice.value.id = res.data.id
                    if (res.data.list.length != 0) {
                        invoice.value.list = res.data.list
                    }

                    changeTotal()
                    changeBank()
                })
            } else {
                searchGanXiang(use_store.id).then(res => {
                    if (res.data.invoiceNumber != '新') {
                        invoice.value.invoiceNumber = res.data.invoiceNumber
                    }
                    invoice.value.days = res.data.days
                    invoice.value.customerName = res.data.customerName
                    invoice.value.customerAddress = res.data.customerAddress
                    if (res.data.invoiceDate != '' && res.data.invoiceDate != null) {
                        invoice.value.invoiceDate = res.data.invoiceDate
                    }
                    invoice.value.priceTerms = res.data.priceTerms
                    invoice.value.paymentProvision = res.data.paymentProvision
                    // invoice.value.paymentMethods = res.data.paymentMethods
                    invoice.value.paymentDate = res.data.paymentDate
                    invoice.value.contractNo = res.data.contractNo
                    invoice.value.bankAccountType = res.data.bankAccountType
                    invoice.value.invoiceRatio = res.data.invoiceRatio
                    invoice.value.invoiceMethod = res.data.invoiceMethod
                    invoice.value.applicationDepartment = res.data.applicationDepartment
                    invoice.value.applyPerson = res.data.applyPerson
                    invoice.value.applyTime = res.data.applyTime
                    if (res.data.unitPrice != null && res.data.unitPrice != '') {
                        invoice.value.unitPrice = res.data.unitPrice
                    }
                    invoice.value.id = res.data.id
                    if (res.data.list.length != 0) {
                        invoice.value.list = res.data.list
                    }
                    buyerChange()
                    changeTotal()
                    changeBank()
                })

            }
        } else {

            changeTotal()
        }
    })
})

function changeDes(val, index) {
    if (val.description == "Freight") {
        invoice.value.list[index].quantity = '1'
        changeTotal()
    }
}

function changeTotal() {
    if (use_store.status == 1) {
        bankOptions.value = banklist.value.filter(item => {
            if (item.type == "自接" && item.unitPrice == invoice.value.unitPrice) {
                return item
            }
        })
    }
    invoice.value.commodityTotal = math.addTwo(math.addTwo(invoice.value.list[0].description == 'Freight' ? 0 : math.addTwo(invoice.value.list[0].quantity, invoice.value.list[1].description == 'Freight' ? 0 : invoice.value.list[1].quantity), math.addTwo(invoice.value.list[2].description == 'Freight' ? 0 : invoice.value.list[2].quantity, invoice.value.list[3].description == 'Freight' ? 0 : invoice.value.list[3].quantity)), math.addTwo(math.addTwo(invoice.value.list[4].description == 'Freight' ? 0 : invoice.value.list[4].quantity, invoice.value.list[5].description == 'Freight' ? 0 : invoice.value.list[5].quantity), math.addTwo(invoice.value.list[6].description == 'Freight' ? 0 : invoice.value.list[6].quantity, invoice.value.list[7].description == 'Freight' ? 0 : invoice.value.list[7].quantity)))
    invoice.value.list[0].amount = math.multiplyTwo(invoice.value.list[0].quantity, invoice.value.list[0].unitPrice).toFixed(2)
    invoice.value.list[1].amount = math.multiplyTwo(invoice.value.list[1].quantity, invoice.value.list[1].unitPrice).toFixed(2)
    invoice.value.list[2].amount = math.multiplyTwo(invoice.value.list[2].quantity, invoice.value.list[2].unitPrice).toFixed(2)
    invoice.value.list[3].amount = math.multiplyTwo(invoice.value.list[3].quantity, invoice.value.list[3].unitPrice).toFixed(2)
    invoice.value.list[4].amount = math.multiplyTwo(invoice.value.list[4].quantity, invoice.value.list[4].unitPrice).toFixed(2)
    invoice.value.list[5].amount = math.multiplyTwo(invoice.value.list[5].quantity, invoice.value.list[5].unitPrice).toFixed(2)
    invoice.value.list[6].amount = math.multiplyTwo(invoice.value.list[6].quantity, invoice.value.list[6].unitPrice).toFixed(2)
    invoice.value.list[7].amount = math.multiplyTwo(invoice.value.list[7].quantity, invoice.value.list[7].unitPrice).toFixed(2)
    invoice.value.num = math.multiplyTwo(math.addTwo(math.addTwo(math.addTwo(invoice.value.list[0].amount, invoice.value.list[1].amount), math.addTwo(invoice.value.list[2].amount, invoice.value.list[3].amount)), math.addTwo(math.addTwo(invoice.value.list[4].amount, invoice.value.list[5].amount), math.addTwo(invoice.value.list[6].amount, invoice.value.list[7].amount))), math.divideTwo(invoice.value.invoiceRatio, 100))
    invoice.value.commodityMoney = invoice.value.num.toFixed(2)
    invoice.value.say = invoice.value.unitPrice == 'USD' ? 'US Dollars' : 'CNY'
    if (invoice.value.unitPrice == 'USD') {
        dollars(invoice.value.commodityMoney).then(res => {
            invoice.value.englishMoney = res.data
        })
    } else if (invoice.value.unitPrice == 'CNY') {
        yuan(invoice.value.commodityMoney).then(res => {
            invoice.value.englishMoney = res.data
        })
    }
}

function changeUnit() {
    changeTotal()
}

function changeBank() {
    bankOptions.value.forEach(item => {
        if (item.bankAccountType == invoice.value.bankAccountType) {
            invoice.value.bankInfo = item.bankInfo
        }
    })
}

function buyerChange() {
    customerNameOptions.value.map(item => {
        if (item.name == invoice.value.customerName) {
            console.log(1);
            invoice.value.customerAddress = item.address
            if (use_store.status == 2) {
                if (item.bankAccountType != null && item.bankAccountType != undefined) {
                    bankOptions.value = JSON.parse(JSON.stringify(tongBankList.value))
                    bankOptions.value.push({ bankAccountType: item.bankAccountType, bankInfo: item.bankInfo })
                } else {
                    bankOptions.value = JSON.parse(JSON.stringify(tongBankList.value))
                    console.log(bankOptions.value, tongBankList.value);
                }
            }
        }
    })
}

function searchCustomer(params) {
    findAllByName({ name: params }).then(res => {
        customerNameOptions.value = res.data
    })
}

const draft = async () => {
    //基本信息校验
    const form1ref = async (formEl) => {
        if (!formEl) return
        return await formEl._value.validate((valid: any) => {
        })
    }
    const form2ref = async (formEl) => {
        if (!formEl) return
        return await formEl._value.validate((valid: any) => {
        })
    }
    const form3ref = async (formEl) => {
        if (!formEl) return
        return await formEl._value.validate((valid: any) => {
        })
    }
    const formRes = await Promise.all([
        form1ref(form1),
        form2ref(form2),
        form2ref(form3),
    ])

    //判断当前并行返回的校验
    // if (formRes[0] == true && formRes[1] == true && formRes[2] == true) {
    // if(invoice.value.invoiceDate.indexOf('T') > 1){
    invoice.value.invoiceDate = new Date(invoice.value.invoiceDate).toLocaleDateString()
    if (invoice.value.paymentDate != '' && invoice.value.paymentDate != undefined) {
        invoice.value.paymentDate = new Date(invoice.value.paymentDate).toLocaleDateString()
    }
    // }
    if (use_store.operation == 4) {
        invoice.value.id = null
        invoice.value.applicationDepartment = JSON.parse(user).department
        invoice.value.applyPerson = JSON.parse(user).username
        invoice.value.applyTime = myDate.toLocaleDateString()
    }
    if (use_store.status == 1) {
        invoice.value.type = "外销-形式发票-干箱-自接"
        draftGanXiangKaiPiao(invoice.value).then(res => {
            if (res.code == 200) {
                cancel()
            } else if (res.code == 901) {
                ElMessage.error('开票号重复')
            }
        })
    } else if (use_store.status == 2) {
        invoice.value.type = "外销-形式发票-干箱-统接"
        draftGanXiangKaiPiao(invoice.value).then(res => {
            if (res.code == 200) {
                cancel()
            } else if (res.code == 901) {
                ElMessage.error('开票号重复')
            }
        })
    } else if (use_store.status == 3) {
        invoice.value.type = "外销-形式发票-干箱-BSL"
        draftGanXiangKaiPiao(invoice.value).then(res => {
            if (res.code == 200) {
                cancel()
            } else if (res.code == 901) {
                ElMessage.error('开票号重复')
            }
        })
    } else if (use_store.status == 4) {
        invoice.value.type = "外销-形式发票-零部件"
        draftLingbujianKaiPiao(invoice.value).then(res => {
            if (res.code == 200) {
                cancel()
            } else if (res.code == 901) {
                ElMessage.error('开票号重复')
            }
        })
    }
    // } else {
    //     console.log('校验错误')
    // }
}

const save = async () => {
    //基本信息校验
    const form1ref = async (formEl) => {
        if (!formEl) return
        return await formEl._value.validate((valid: any) => {
            console.log(valid)
        })
    }
    const form2ref = async (formEl) => {
        if (!formEl) return
        return await formEl._value.validate((valid: any) => {
            console.log(valid)
        })
    }
    const form3ref = async (formEl) => {
        if (!formEl) return
        return await formEl._value.validate((valid: any) => {
            console.log(valid)
        })
    }
    const formRes = await Promise.all([
        form1ref(form1),
        form2ref(form2),
        form2ref(form3),
    ])

    //判断当前并行返回的校验
    if (formRes[0] == true && formRes[1] == true && formRes[2] == true) {
        invoice.value.invoiceDate = new Date(invoice.value.invoiceDate).toLocaleDateString()
        if (invoice.value.paymentDate != '' && invoice.value.paymentDate != undefined) {
            invoice.value.paymentDate = new Date(invoice.value.paymentDate).toLocaleDateString()
        }
        if (use_store.operation == 4) {
            invoice.value.id = null
            invoice.value.applicationDepartment = JSON.parse(user).department
            invoice.value.applyPerson = JSON.parse(user).username
            invoice.value.applyTime = myDate.toLocaleDateString()
        }
        if (use_store.operation == 2) {
            if (use_store.status == 1) {
                invoice.value.type = "外销-形式发票-干箱-自接"
                kaiPiaoGanXiang(invoice.value).then(res => {
                    if (res.code == 200) {
                        cancel()
                    } else if (res.code == 901) {
                        ElMessage.error('开票号重复')
                    }
                })
            } else if (use_store.status == 2) {
                invoice.value.type = "外销-形式发票-干箱-统接"
                kaiPiaoGanXiang(invoice.value).then(res => {
                    if (res.code == 200) {
                        cancel()
                    } else if (res.code == 901) {
                        ElMessage.error('开票号重复')
                    }
                })
            } else if (use_store.status == 3) {
                invoice.value.type = "外销-形式发票-干箱-BSL"
                kaiPiaoGanXiang(invoice.value).then(res => {
                    if (res.code == 200) {
                        cancel()
                    } else if (res.code == 901) {
                        ElMessage.error('开票号重复')
                    }
                })
            } else if (use_store.status == 4) {
                invoice.value.type = "外销-形式发票-零部件"
                kaiPiaoLingBuJian(invoice.value).then(res => {
                    if (res.code == 200) {
                        cancel()
                    } else if (res.code == 901) {
                        ElMessage.error('开票号重复')
                    }
                })
            }
        } else if (use_store.operation == 5) {
            if (use_store.status != 4) {
                ganxiangExamine([invoice.value.id]).then(res => {
                    cancel()
                })
            } else {
                lingbujianExamine([invoice.value.id]).then(res => {
                    cancel()
                })
            }
        }

    } else {
        console.log('校验错误')
    }
}

function reject() {
    if (use_store.status == 4) {
        lingbujianExamineFalse([invoice.value.id]).then(res => {
            cancel()
        })
    } else {
        ganxiangExamineFalse([invoice.value.id]).then(res => {
            cancel()
        })
    }
}

function cancel() {
    router.push({
        path: use_store.path
    })
}

function changePayClause() {
    paymentOptions.forEach(item => {
        if (item.label == invoice.value.paymentProvision) {
            invoice.value.paymentMethods = item.value
            const time = new Date(invoice.value.invoiceDate)
            invoice.value.paymentDate = new Date(time.setDate(time.getDate() + item.day)).toLocaleDateString()

        }
    })
}

function changeDate() {
    if (invoice.value.days != '') {
        console.log(1);
        const time = new Date(invoice.value.invoiceDate)
        invoice.value.paymentDate = new Date(time.setDate(time.getDate() + Number(invoice.value.days))).toLocaleDateString()

    }
}
</script>
<style lang="scss" scoped>
#print-iframe {
    margin: auto;
    width: 810px;
    height: 1166px;
    position: relative;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;

    .title {
        height: 117px;
        text-align: center;
        margin-bottom: 8px;

        img {
            width: 715px;
            height: 137px;
        }
    }

    .No {
        position: relative;
        right: -240px;

        .el-form-item {
            display: inline;
        }

        :deep(.el-form-item__content) {
            display: inline;
        }
    }

    .main {
        margin-left: auto;
        margin-right: auto;
        height: 823px;
        width: 715px;
        text-align: center;

        img {
            width: 715px;
            height: 48px;
            margin-bottom: -3px;
        }

        .first_first {
            height: 285px;
            width: 327px;
            border: 1px solid black;
            float: left;
            border-bottom: 0px;

            .title {
                line-height: 20px;
                font-size: 12px;
                text-align: left;
                font-weight: 700;
                height: 30px;
            }

            .buyer {
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: 50px;
                line-height: 20px;
                font-size: 12px;
                text-align: left;
                text-indent: 28px;
                font-weight: 700;
            }

            .address {
                height: 180px;

                .addr {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    width: 103px;
                    vertical-align: middle;
                    height: 180px;
                    float: left;
                    font-weight: 700;
                    line-height: 12px;
                    font-size: 11px;
                }

                .note {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    font-weight: 700;
                    line-height: 12px;
                    font-size: 11px;
                    text-align: left;
                    width: 220px;
                    height: 180px;
                    float: right;
                }
            }

        }

        .first_second {
            width: 388px;
            border: 1px solid black;
            height: 70px;
            float: right;
            border-left: 0px;

            .title {
                margin-top: 5px;
                margin-left: 5px;
                font-weight: 700;
                line-height: 15px;
                font-size: 15px;
                text-align: left;
                height: 18px;
            }

            .date {
                height: 37px;
                margin-left: 5px;
                font-weight: 700;
                line-height: 15px;
                font-size: 15px;
                text-align: left;

                :deep(.el-form-item__content) {
                    display: inline;
                }

                span {
                    margin-left: 60px;

                }
            }
        }

        .first_third {
            width: 388px;
            height: 214px;
            float: right;
            border: 1px solid black;
            border-top: 0px;
            border-left: 0px;
            border-bottom: 0px;

            .price {
                height: 50px;
                font-size: 14px;
                font-weight: 700;

                .title {
                    margin-top: 10px;
                    text-align: left;
                    margin-bottom: 5px;
                    height: 15px;
                }

                .note {
                    text-align: left;

                    :deep(.el-form-item__content) {
                        display: inline;
                    }
                }
            }

            .payment {
                padding-top: 5px;
                height: 100px;
                border-top: 1px solid black;
                border-bottom: 1px solid black;
                font-size: 14px;
                font-weight: 700;

                .title {
                    text-align: left;
                    height: 25px;

                    :deep(.el-form-item__content) {
                        display: inline;
                    }
                }

                .note {
                    height: 60px;

                    .left {
                        text-align: left;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        width: 65px;
                        height: 50px;
                        vertical-align: middle;
                        float: left;
                        font-weight: 700;
                        line-height: 12px;
                        font-size: 12px;
                    }

                    .right {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        font-weight: 700;
                        line-height: 12px;
                        text-align: left;
                        width: 310px;
                        height: 50px;
                        float: right;
                        font-size: 12px;
                        font-weight: 700;
                    }
                }
            }

            .due {
                .title {
                    padding-top: 5px;
                    height: 20px;
                    font-weight: 700;
                    line-height: 12px;
                    font-size: 14px;
                    text-align: left;
                }

                .note {
                    height: 20px;
                    font-weight: 700;
                    line-height: 12px;
                    font-size: 14px;
                    text-align: left;
                }
            }
        }

        .second {
            height: 40px;
            width: 715px;
            float: left;
            background-color: rgb(255, 255, 204);
            font-family: 'Times New Roman', Times, serif;
            font-size: 7px;
            font-weight: 800;

            .des {
                width: 327px;
                height: 40px;
                border: 1px solid black;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .quan {
                width: 80px;
                height: 40px;
                border: 1px solid black;
                border-left: 0px;
                border-right: 0px;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .price {
                width: 123px;
                height: 40px;
                border: 1px solid black;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .amount {
                width: 185px;
                height: 40px;
                border: 1px solid black;
                border-left: 0px;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }

        .third {
            width: 715px;
            height: 401px;
            border-top: 0px;
            float: left;

            .third_first {
                position: relative;
                width: 327px;
                height: 401px;
                border: 1px solid black;
                border-top: 0px;
                float: left;

                .el-form {
                    height: 220px;

                    .el-form-item {
                        margin-bottom: 2px;
                        font-weight: 700;

                        :deep(.el-form-item__label) {
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 13px;
                            color: black;
                        }

                        :deep(.el-form-item__content) {
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 13px;
                            color: black;
                        }

                        .el-input:nth-child(2n) {
                            margin-left: 18px;
                        }

                        .bank {
                            margin-left: 20px;
                            margin-right: 8px;
                        }
                    }

                }

                .remit {
                    height: 120px;
                    bottom: -40px;
                    position: relative;
                    text-align: left;
                    font-size: 13px;
                    font-family: 'Times New Roman', Times, serif;
                    color: black;
                    font-weight: 700;
                    white-space: pre-wrap;
                }
            }

            .third_second {
                width: 80px;
                height: 401px;
                border: 1px solid black;
                border-top: 0px;
                border-left: 0px;
                border-right: 0px;
                float: left;

                .el-form {
                    height: 220px;

                    .el-form-item {
                        margin-bottom: 2px;
                        font-weight: 700;

                        :deep(.el-form-item__label) {
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 15px;
                            color: black;
                        }

                        :deep(.el-form-item__content) {
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 15px;
                            color: black;

                            span {
                                font-family: 'Times New Roman', Times, serif;
                                font-size: 15px;
                                color: black;
                                width: 80px;
                                text-align: center;
                            }
                        }
                    }

                }
            }

            .third_third {
                width: 123px;
                height: 401px;
                border: 1px solid black;
                border-top: 0px;
                float: left;

                .el-form {
                    height: 220px;

                    .el-form-item {
                        margin-bottom: 2px;
                        font-weight: 700;

                        :deep(.el-form-item__label) {
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 11px;
                            color: black;
                        }

                        :deep(.el-form-item__content) {
                            padding-left: 15px;
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 11px;
                            color: black;

                            span:nth-child(2) {
                                width: 77px;
                                text-align: right;
                            }
                        }
                    }

                }
            }

            .third_fourth {
                width: 185px;
                height: 401px;
                border: 1px solid black;
                border-left: 0px;
                border-top: 0px;
                float: left;

                .el-form {
                    height: 220px;

                    .el-form-item {
                        margin-bottom: 2px;
                        font-weight: 700;

                        :deep(.el-form-item__label) {
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 11px;
                            color: black;
                        }

                        :deep(.el-form-item__content) {
                            padding-left: 35px;
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 11px;
                            color: black;

                            span:nth-child(2) {
                                width: 120px;
                                text-align: right;
                            }
                        }
                    }

                }
            }

            .total {
                color: red;
            }
        }

        .fourth {
            width: 715px;
            height: 30px;
            float: left;

            .fourth_first {
                width: 327px;
                height: 30px;
                border: 1px solid black;
                border-top: 0px;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
                font-family: 'Times New Roman', Times, serif;
                font-size: 12px;
                font-weight: 800;
            }

            .fourth_second {
                width: 80px;
                height: 30px;
                border: 1px solid black;
                border-top: 0px;
                border-left: 0px;
                border-right: 0px;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
                font-family: 'Times New Roman', Times, serif;
                font-size: 13px;
                font-weight: 800;
            }

            .fourth_third {
                width: 123px;
                height: 30px;
                border: 1px solid black;
                border-top: 0px;
                float: left;
            }

            .fourth_fourth {
                width: 185px;
                height: 30px;
                border: 1px solid black;
                border-left: 0px;
                border-top: 0px;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
                font-family: 'Times New Roman', Times, serif;
                font-size: 12px;
                font-weight: 800;
                padding-left: 30px;
                align-items: start;

                div {
                    width: 147px;
                    justify-content: space-between;
                    display: flex;
                }

            }

            .total {
                color: red;
            }
        }

        .fifth {
            width: 715px;
            height: 53px;
            background-color: rgb(255, 255, 204);
            float: left;
            border: 1px solid black;
            border-top: 0px;
            display: flex;
            flex-direction: column;
            padding-left: 30px;
            text-align: left;
            font-family: 'Times New Roman', Times, serif;
            font-size: 14px;
            font-weight: 800;
            font-style: italic;
            justify-content: center;

            span:nth-child(2) {
                margin-left: 5px;
                margin-right: 20px;
            }

            span:nth-child(3) {
                font-size: 13px;
                color: red;
            }
        }

        .sixth {
            float: right;
            width: 333px;

            .head {
                line-height: 20px;
                font-size: 14px;
                font-family: 'Times New Roman', Times, serif;
                font-weight: 800;
                z-index: 2;
                position: relative;
            }

            img {
                width: 333px;
                height: 85px;
                margin-top: -10px;
                z-index: 1;
            }

            .foot {
                font-size: 14px;
                font-family: 'Times New Roman', Times, serif;
                font-weight: 800;
                margin-top: -15px;
            }
        }
    }
}

.footer {
    width: 100%;
    text-align: center;
}
</style>
